/*
 * @Author:samfeng
 * @Date: 2021-04-18 11:33:39
 * @LastEditTime: 2021-05-01 20:42:22
 * @LastEditors: Please set LastEditors
 * @Description: 点餐界面右中边展示
 * @FilePath: /first_flutter_app/lib/views/orderPage/orderRightPage.dart
 */
import 'dart:math';

import 'package:first_flutter_app/constant/dataInfo.dart';
import 'package:first_flutter_app/controller/orderPageController.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:rflutter_alert/rflutter_alert.dart';

class RightMiddlePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Color.fromRGBO(243, 245, 247, 1.5),
        border: Border(
          right: BorderSide(
            color: Color.fromRGBO(233, 236, 239, 1),
          ),
        ),
      ),
      width: ScreenUtil().setWidth(670),
      // height: ScreenUtil().setHeight(1950),
      child: Column(
        children: [
          _topContainerShow(context),
          _bottomContainerShow(context),
        ],
      ),
    );
  }

  var randomColors = Color.fromRGBO(
    Random().nextInt(256),
    Random().nextInt(256),
    Random().nextInt(256),
    1,
  );

  var productRandomColors = Color.fromRGBO(
    Random().nextInt(256),
    Random().nextInt(256),
    Random().nextInt(256),
    1,
  );
  // 中部展示菜品展示
  Widget _topContainerShow(BuildContext context) {
    return Container(
      height: 1700.h,
      // padding: EdgeInsets.all(ScreenUtil().setSp(20)),
      decoration: BoxDecoration(
        color: Color.fromRGBO(243, 245, 247, 1.5),
        border: Border(
          bottom: BorderSide(
            color: Color.fromRGBO(233, 236, 239, 1),
          ),
          left: BorderSide(
            color: Color.fromRGBO(233, 236, 239, 1),
          ),
          right: BorderSide(
            color: Color.fromRGBO(233, 236, 239, 1),
          ),
        ),
      ),
      child: _productWrap(context),
    );
  }

  // 单个产品
  Widget _singalProductStackShow(Map product) {
    return Stack(
      children: [
        _productBottomShow(120.0),
        _coverProductTemp(6.0, 120, product),
      ],
    );
  }

  // 套餐
  Widget _mutiProductStackShow(Map product) {
    return Container(
      width: ScreenUtil().setWidth(120),
      child: Column(
        children: [
          Container(
            decoration: BoxDecoration(
              color: randomColors,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8.0),
                topRight: Radius.circular(8.0),
              ),
            ),
            alignment: Alignment.center,
            height: ScreenUtil().setHeight(5),
            width: ScreenUtil().setWidth(80),
          ),
          Container(
            decoration: BoxDecoration(
              color: randomColors,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8.0),
                topRight: Radius.circular(8.0),
              ),
            ),
            alignment: Alignment.center,
            height: ScreenUtil().setHeight(5),
            width: ScreenUtil().setWidth(100),
          ),
          Expanded(
            child: Container(
              width: ScreenUtil().setWidth(120),
              child: Stack(
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: randomColors,
                      borderRadius: BorderRadius.all(
                        Radius.circular(8.0),
                      ),
                    ),
                    alignment: Alignment.center,
                    width: ScreenUtil().setWidth(120),
                    // height: ScreenUtil().setHeight(20),
                  ),
                  _coverProductTemp(3.0, 120, product),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _tempPositioned(double t, double w) {
    return Positioned(top: t, child: _productBottomShow(w));
  }

  // 菜品最终展示图层
  Widget _productShow(product) {
    return product['combine']
        ? _mutiProductStackShow(product)
        : _singalProductStackShow(product);
  }

  // 组装菜品列表
  List<Widget> _getProductList() {
    List<Widget> aList = productList.map((val) {
      return InkWell(
          onTap: () {
            OrderController.oc.setSelectProductList({
              'id': val['id'],
              'productName': val['productName'],
              'qty': 1,
              'selected': false,
              'price': val['price']['originalPrice'],
              'currency': '￥',
              'original_price': val['price']['originalPrice'],
            });
          },
          child: Container(
            height: ScreenUtil().setHeight(280),
            // width: ScreenUtil().setWidth(500),
            child: _productShow(val),
          ),
        );
    }).toList();
    return aList;
  }

  // 底层图层
  Widget _productBottomShow(double w) {
    return Container(
      width: ScreenUtil().setWidth(w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(8.0)),
        color: productRandomColors,
        border: Border.all(
          width: ScreenUtil().setSp(5),
          color: Color.fromRGBO(220, 220, 220, 1),
        ),
      ),
    );
  }

  // 覆盖在上层的图层
  Widget _coverProductTemp(double t, double w, Map product) {
    return Positioned(top: t, child: _productContainer(w, product));
  }

  // 覆盖在上层的产品信息
  Widget _productContainer(double w, Map product) {
    return Container(
      width: ScreenUtil().setWidth(w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(8.0)),
        border: Border.all(
          width: ScreenUtil().setSp(5),
          color: Color.fromRGBO(220, 220, 220, 1),
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            alignment: Alignment.topLeft,
            padding: EdgeInsets.all(ScreenUtil().setSp(5)),
            margin: EdgeInsets.only(bottom: ScreenUtil().setSp(120)),
            child: Text(
              product['productName'],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.black,
                fontSize: ScreenUtil().setSp(35),
              ),
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  margin: EdgeInsets.only(
                    left: ScreenUtil().setSp(10),
                    bottom: ScreenUtil().setSp(5),
                  ),
                  padding: EdgeInsets.only(
                    left: ScreenUtil().setSp(10),
                    right: ScreenUtil().setSp(10),
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: ScreenUtil().setSp(1),
                      color: Colors.blue,
                    ),
                    borderRadius: BorderRadius.all(
                      Radius.circular(8.0),
                    ),
                  ),
                  child: Text(
                    "原价",
                    style: TextStyle(
                      fontSize: ScreenUtil().setSp(20),
                      color: Colors.blue,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(
                    right: ScreenUtil().setSp(10),
                    bottom: ScreenUtil().setSp(5),
                  ),
                  padding: EdgeInsets.only(
                    left: ScreenUtil().setSp(10),
                    right: ScreenUtil().setSp(10),
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: ScreenUtil().setSp(1),
                      color: Colors.orange,
                    ),
                    borderRadius: BorderRadius.all(
                      Radius.circular(8.0),
                    ),
                  ),
                  child: Text(
                    "优惠",
                    style: TextStyle(
                      fontSize: ScreenUtil().setSp(20),
                      color: Colors.orange,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(
              left: ScreenUtil().setSp(10),
              right: ScreenUtil().setSp(10),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  product['currency'] +
                      product['price']['originalPrice'].toString(),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontSize: ScreenUtil().setSp(25),
                  ),
                ),
                Text(
                  product['currency'] +
                      product['price']['discountPrice'].toString(),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontSize: ScreenUtil().setSp(25),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _productWrap(BuildContext context) {
    return  SingleChildScrollView(
          child: GetBuilder<OrderController>(
            init: OrderController(),
            builder: (_) => Wrap(
            spacing: 8.0, // 主轴(水平)方向间距
            runSpacing: 5.0,
            children: this._getProductList(),
            // children: FutureBuilder(
            //   future: _getProductList(), // 用户定义的需要异步执行的代码，类型为Future<String>或者null的变量或函数
            //   builder: (BuildContext context, AsyncSnapshot<String> snapshot) {      //snapshot就是_calculation在时间轴上执行过程的状态快照
            //     switch (snapshot.connectionState) {
            //       case ConnectionState.none: return new Text('Press button to start');    //如果_calculation未执行则提示：请点击开始
            //       case ConnectionState.waiting: return new Text('Awaiting result...');  //如果_calculation正在执行则提示：加载中
            //       default:    //如果_calculation执行完毕
            //         if (snapshot.hasError)    //若_calculation执行出现异常
            //           return new Text('Error: ${snapshot.error}');
            //         else    //若_calculation执行正常完成
            //           return new Text('Result: ${snapshot.data}');
            //     }
            //   }
            // ),
          ),
        ),
      );
  }

  Widget _myTextButton(Widget myIcon, String txt, String clickType, BuildContext context) {
    return TextButton(
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith(
          (states) {
            if (states.contains(MaterialState.focused) &&
                !states.contains(MaterialState.pressed)) {
              //获取焦点时的颜色
              return Colors.blue;
            } else if (states.contains(MaterialState.pressed)) {
              //按下时的颜色
              return Colors.blue[400];
            }
            //默认状态使用灰色
            return Colors.grey;
          },
        ),
      ),
      onPressed: () {
        if(clickType == "gq") {
          Alert(
            style: AlertStyle(
              isButtonVisible: false,
            ),
            context: context,
            title: "商品估清设置",
            content: Column(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(
                    top: 20.sp,
                    bottom: 40.sp
                  ),
                  child: Divider(height: 1.0,color: Colors.grey,),
                ),
                DialogButton(
                  width: 520.w,
                  onPressed: () => Navigator.pop(context),
                  child: Text(
                    "估清",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
                DialogButton(
                  color: Colors.green,
                  width: 520.w,
                  onPressed: () => Navigator.pop(context),
                  child: Text(
                    "设置剩余可售卖数",
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                )
              ],
            ),
          ).show();
        }
      },
      child: Row(
        children: [
          myIcon,
          Text(
            txt,
            style: TextStyle(
              fontSize: ScreenUtil().setSp(50),
              color: Colors.black45,
              fontWeight: FontWeight.w700,
            ),
          )
        ],
      ),
    );
  }

  // 底部展示
  Widget _bottomContainerShow(BuildContext context) {
    return Container(
      // padding: EdgeInsets.only(
      //   top: ScreenUtil().setSp(20),
      //   left: ScreenUtil().setSp(50),
      //   right: ScreenUtil().setSp(50),
      // ),
      // decoration: BoxDecoration(
      //   border: Border(
      //     bottom: BorderSide(
      //       color: Color.fromRGBO(233, 236, 239, 1),
      //     ),
      //     left: BorderSide(
      //       color: Color.fromRGBO(233, 236, 239, 1),
      //     ),
      //     right: BorderSide(
      //       color: Color.fromRGBO(233, 236, 239, 1),
      //     ),
      //   ),
      // ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          _myTextButton(
            Icon(
              Icons.dashboard,
              size: 30,
            ),
            "估清",
            "gq",
            context
          ),
          _myTextButton(
              Icon(
                Icons.qr_code_outlined,
                size: 30,
              ),
              "扫码",
              "sm",
              context
          ),
          _myTextButton(
              Icon(
                Icons.receipt_long,
                size: 30,
              ),
              "验券", "yq",context),
          _myTextButton(
              Icon(
                Icons.assignment,
                size: 30,
              ),
              "临时菜", "temp",context),
        ],
      ),
    );
  }
}
